<style lang="less" scoped>
.main-keyword-group {
    .btn-wrap {
        padding: 5px 0;
    }
    .online,
    .offline {
        margin-left: 0;
    }
    .second-row .manage-templet {
        margin-top: 5px;
    }
    .group {
        display: inline-block;
        vertical-align: top;
    }
}
</style>
<template>
    <div class="main main-keyword-group">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/keywords' }">用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="main-menus">
                <el-button type="primary" icon="plus" @click="editItem({}, '新增')">新增角色</el-button>
            </div>
        </div>
            <div class="main-filters">
            <!-- <el-form :inline="true" :model="query">
                <el-form-item>
                    <el-radio-group v-model="query.status">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button label="1">上线</el-radio-button></el-radio-button>
                        <el-radio-button label="0">下线</el-radio-button></el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form> -->
        </div>
        <div class="main-actions">
            <div class="main-actions-label">
                共<em>{{itemsData.pagination.total}}</em>条
            </div>
        </div>
        <el-table
            border
            element-loading-text="Loading..."
            v-loading.body="!itemsData.$resolved"
            :data="itemsData.items"
            @sort-change="onSortItems"
            @selection-change="onSelect"
        >
            <el-table-column sortable="custom" prop="id" label="ID" width="80"></el-table-column>
            <el-table-column width="240" prop="name" label="角色"></el-table-column>
            <el-table-column width="240" prop="code" label="角色编号"></el-table-column>
            <el-table-column label="用户" inline-template>
                <div>
                    <span v-for="item in row.users"> &nbsp {{ item.keyword }}</span>
                </div>
            </el-table-column>
            <!-- <el-table-column label="状态属性" width="100" inline-template>
                <div>
                    <el-tag type="success" v-if="row.status === 1">已上架</el-tag>
                    <el-tag type="warning" v-else>已下架</el-tag>
                </div>
            </el-table-column> -->
            <!-- <el-table-column sortable="custom" prop="priority" label="排序"></el-table-column> -->
            <el-table-column label="操作" inline-template>
                <div class="btn-wrap">
                    <el-button size="small" @click="editItem(row, '编辑')">编辑或分配菜单</el-button>
                    <el-button size="small" type="danger" v-if="row.users.length < 1" @click="deleteItem(row)">删除</el-button>
                    <router-link :to="'users?role_id='+row.id">
                        <el-button type="primary" size="small" class="manage-templet">该角色用户</el-button>
                    </router-link>
                </div>
            </el-table-column>
        </el-table>

        <el-pagination
            v-if="itemsData.$resolved"
            layout="prev, pager, next, jumper"
            :total="itemsData.pagination.total"
            :current-page="query.page_num"
            :page-size="query.page_size"
            @current-change="onPageChange"
        >
        </el-pagination>

        <el-dialog
            :title="editData.title"
            :visible.sync="editDialogVisible"
            size="tiny"
        >
            <el-form :model="editData">
                <el-form-item label="角色名称">
                    <el-input v-model="editData.name" placeholder="输入角色组名"></el-input>
                </el-form-item>
                <el-form-item label="角色编号">
                    <el-input v-model="editData.code" placeholder="输入角色编号, 支持字母"></el-input>
                </el-form-item>
                <el-form-item label="权限分配">
                    <el-tree
                    ref="tree"
                    :data="menus"
                    show-checkbox
                    node-key="name"
                    default-expanded-keys="['票券系统', '维修系统']"
                    :props="defaultProps">
                    </el-tree>
                </el-form-item>
                    <el-button type="primary" @click="submitEdit">确 定</el-button>
                <el-form-item >
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>

import ListController from '../controllers/list';

import RoleModel from '../models/role';

import menus from '../data/menus';

export default new ListController({
    data() {
        return {
            ListModel: RoleModel,

            query: {
                page_num: 1,
                page_size: 20,
                sort: ''
            },
            defaultProps: {
                children: 'children',
                label: 'name'
            },

            groups: [],
            menusChoose: [],
            editData: {
            },
            editDialogVisible: false,
            menus: menus
        };
    },
    methods: {
        debugItem(row) {
            this.$confirm('确认调试该项？')
            .then(() => {
                this.ListModel.update({
                    id: row.id,
                    status: 1
                }).$promise;
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        pullItem(row) {
            this.$confirm('确认下线该项？')
            .then(() => {
                const params = Object.assign({}, row, {
                    id: row.id,
                    status: 0
                });
                this.ListModel.update(params).$promise;
            })
            .then(() => {
                this.$message({
                    message: '下线成功！',
                    type: 'success'
                });

                this.loadItems();
            })
            .catch(err => {
                this.$message.error(err);
            });
        },
        pushItem(row) {
            this.$confirm('确认上线该项？')
            .then(() => {
                return this.ListModel.update({
                    id: row.id,
                    status: 1
                }).$promise
                .then(() => {
                    this.loadItems();
                });
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        deleteItem(row) {
            this.$confirm('确认删除该角色？')
            .then(() => {
                return this.ListModel.delete({
                    id: row.id
                }).$promise;
            })
            .then(() => {
                return this.loadItems();
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        editItem(row) {
            this.editDialogVisible = true;

            setTimeout(() => {
                this.menusChoose = row.menus || [];
                this.$refs.tree.setCheckedKeys(this.menusChoose);
                this.editData = Object.assign({id: row.id, name: '', menus: []}, row);
            }, 500)
        },
        submitEdit() {
            let params = null;
            let $submitPromise = null;
            this.editData.menus = this.$refs.tree.getCheckedKeys();
            if(this.editData.id > 0) {
                $submitPromise = this.ListModel.update(this.editData).$promise;
            }
            else {
                params = Object.assign({}, this.editData);
                $submitPromise = this.ListModel.save(params).$promise;
            }

            $submitPromise
            .then(res => {
                 this.editDialogVisible = false;
                if(res.code && res.code !== 200) {
                    this.$message.error(res.message);
                    return;
                }
                this.$message({
                    message: '提交成功！',
                    type: 'success'
                });
                this.menusChoose = [];
                this.loadItems();
            })
            .catch(err => {
                this.loadItems();
                this.$message.error(err);
            });
        }
    }
});
</script>
